<template>
  <div v-loading="loading" class="grid grid-cols-5 gap-x-4 mt-2">
    <div v-for="data of totalNums" :key="data.key">
      <div
        class="p-4 cursor-pointer hover:shadow-[0_8px_12px_rgba(0,0,0,0.1)] hover:text-primary"
        :style="[
          {
            background: data.background,
          },
        ]"
        @click="
          handleTaskClick(data.url, {
            status: data.status,
          })
        "
      >
        <div class="flex items-center justify-center">
          <img class="w-5" alt="" :src="data.icon" />
          <h1 class="ml-3">{{ data.title }}</h1>
        </div>
        <div class="mt-[10px] flex justify-center items-center">
          <span class="font-[700]">{{ data.num }}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex justify-between flex-wrap mt-2">
    <div
      class="flex flex-col justify-center items-center w-[18%] mt-3 px-3 py-[6px] rounded-[4px] bg-[#F5F7FB] hover:shadow-[0_8px_12px_rgba(0,0,0,0.1)] hover:text-primary cursor-pointer"
      v-for="item of kindsList"
      :key="item.title"
      @click="
        handleTaskClick('/mission/follow', {
          domainId: item.domainId,
        })
      "
    >
      <div>
        {{ item.domainName }}
      </div>
      <div>{{ item.matterNum }}</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { queryMatterProcessStatistics } from '@/api/home'
import useFetch from '@/hooks/useFetch'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import totalIcon from '@/assets/icons/total-icon.png'
import unSignedIcon from '@/assets/icons/un-signed-icon.png'
import processIcon from '@/assets/icons/process-icon.png'
import completeIcon from '@/assets/icons/finished-icon.png'
import timeoutIcon from '@/assets/icons/timeout-icon.png'
import { EMatterStatus } from '@/components/statusShow/util'

const router = useRouter()

const totalNums = ref([
  {
    title: '总数',
    background: 'rgba(227, 249, 233, 1)',
    url: '/mission/follow',
    icon: totalIcon,
    key: 'matterTotalNum',
    num: 0,
    status: 0,
  },
  {
    title: '未签收',
    key: 'unSignedMatterNum',
    background: '#FFF7D9',
    url: '/mission/follow',
    icon: unSignedIcon,
    num: 0,
    status: EMatterStatus['未签收'],
  },
  {
    title: '正常推进',
    key: 'proceedNormallyMatterNum',
    background: '#F2F3FF',
    url: '/mission/follow',
    icon: processIcon,
    num: 0,
    status: EMatterStatus['正常推进'],
  },
  {
    title: '已完成',
    background: '#FFF1E9',
    url: '/mission/follow',
    icon: completeIcon,
    key: 'completedMatterNum',
    num: 0,
    status: EMatterStatus['已完成'],
  },
  {
    title: '已超时',
    background: '#EBFCFF',
    url: '/mission/follow',
    icon: timeoutIcon,
    key: 'timeOutMatterNum',
    num: 0,
    status: EMatterStatus['已超时'],
  },
])

const kindsList = ref([])

const { loading, onFetchSuccess } = useFetch(
  queryMatterProcessStatistics,
  {},
  true,
)

onFetchSuccess((data) => {
  const totalInfo = data?.tmatterStatisticsVo || {}
  let originInfo = totalNums.value
  originInfo = originInfo.map((item) => {
    return {
      ...item,
      num: totalInfo[item.key] ?? 0,
    }
  })

  totalNums.value = originInfo

  kindsList.value = data?.tmatterDomainStatisticsVos ?? []
})

// 事项任务跳转
const handleTaskClick = (url: string, query: Record<string, any>) => {
  router.push({
    path: url,
    query,
  })
}
</script>
